<template>
  <view class="card-list">
    <slot name="addBtn"></slot>
    <custom-list class="list-box" ref="cardList" :dataList="value">
      <slot :data="value"/>
    </custom-list>
  </view>
</template>

<script>
export default {
  name: 'cardList',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    reset() {
      this.$nextTick(() => {
        if (this.$refs.cardList) {
          this.$refs.cardList.reset();
        }
      })
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val.length > 0) {
          this.reset()
        }
      },
      immediate: true
    },
  }
}
</script>

<style scoped>
.card-item {
  background: #F6F7F9;
  border-radius: 8px;
  margin-bottom: 15px;
}
</style>
